<template>
  <div class="tab_bar">
    <div
      class="tab"
      v-for="(item, index) in tabList"
      :key="index"
      @click="select(index)"
    >
      <a
        class="tab_text tc_slate"
        :class="activeIndex == index ? 'selected' : ''"
        >{{ item }}</a
      >
    </div>
    <div class="line" :style="{ transform: `translateX(${lineLeft}px)` }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: ["全部", "投稿视频", "追番追剧", "专栏"],
      activeIndex: 0,
    };
  },
  methods: {
    select(index) {
      if (index == this.activeIndex) return;
      this.activeIndex = index;
      this.$emit("getActive", index);
    },
  },
  computed: {
    lineLeft() {
      return this.activeIndex * (56 + 20) + 20;
    },
  },
};
</script>

<style lang="scss">
* {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  outline: none;
}
.tab_bar {
  width: 100%;
  height: 48px;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
  margin-bottom: 8px;
  .tab {
    display: inline-block;
    min-width: 56px;
    height: 48px;
    text-align: center;
    padding-left: 20px;
    vertical-align: top;
    .tab_text {
      display: inline-block;
      min-width: 56px;
      height: 48px;
      line-height: 48px;
      font-size: 14px;
      letter-spacing: 0;
      cursor: pointer;
    }
    .tc_slate {
      color: #99a2aa;
    }
    .selected {
      color: #00b5e5;
    }
  }
  .line {
    position: absolute;
    width: 56px;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #00b5e5;
    transition: transform 0.2s;
  }
}
</style>